<template>
    <div class="scrollbox">
        <!-- 头部 -->
        <v-header></v-header>
        <div class="dis10"></div>
        <div class="listbox aps9">
            <v-list
                    api="snmp_exporter.metric_list"
                    ref="list"
                    cards="1"
                    :params="params"
            >
                <template slot="search">
                    <el-button
                            v-if="userinfo.role !='view'"
                            class="operate"
                            size="small"
                            type="primary"
                            icon="el-icon-plus"
                            @click="edit(params)"
                    >添加</el-button>&nbsp;&nbsp;&nbsp;
                    <!--<el-button-->
                            <!--v-if="userinfo.role !='view'"-->
                            <!--class="operate"-->
                            <!--size="small"-->
                            <!--type="primary"-->
                            <!--icon="el-icon-sort"-->
                            <!--@click="generate()"-->
                            <!--style="float: right"-->
                    <!--&gt;生成配置</el-button>&nbsp;-->
                </template>
                <template slot="head" slot-scope="props">
                    <thead>
                    <tr class="tr">
                        <th class="c1">名称</th>
                        <th>类型</th>
                        <th>配置</th>
                        <th>oid</th>
                        <th>正则表达</th>
                        <th>索引</th>
                        <th>枚举值</th>
                        <th  v-if="userinfo.role !='view'">操作</th>
                    </tr>
                    </thead>
                </template>
                <template slot="item" slot-scope="props">
                    <tr>
                        <td class="font-blue f14">
                            <!--<a href="javascript:void(0)" class="font-blue f14">-->
                                <span v-if="!props.item.name">-</span>
                                {{ props.item.name }}
                            <!--</a>-->
                        </td>
                        <td class="font-gray2">
                            <span v-if="!props.item.type">-</span>
                            {{props.item.type}}
                        </td>
                        <td class="font-gray2">{{ props.item.metric || '-' }}</td>
                        <td class="font-gray2">{{ props.item.oid || '-' }}</td>
                        <td class="font-gray2">
                            <span v-if="!props.item.regex_extracts">-</span>
                            {{props.item.regex_extracts}}
                        </td>
                        <td class="font-gray2">
                            <span>{{props.item.indexes }} </span><br/>
                            <span>({{props.item.help}})</span>
                        </td>
                        <td class="font-gray2">
                            {{props.item.enum_values || '-'}}
                        </td>
                        <td  v-if="userinfo.role !='view'" style="min-width: 100px">
                            <el-button
                                    size="mini"
                                    title="编辑"
                                    icon="el-icon-edit"
                                    type="primary"
                                    circle
                                    @click="edit(props.item)"
                            ></el-button>
                            <el-button
                                    size="mini"
                                    title="删除"
                                    icon="el-icon-delete"
                                    type="danger"
                                    circle
                                    @click="del(props.item)"
                            ></el-button>
                        </td>
                    </tr>
                </template>
            </v-list>
        </div>

        <!-- 编辑 -->
        <el-dialog :title="editData.title" :visible.sync="editData.status" width="680px" top="7vh">
            <div class="dialogform">
                <el-form
                        :model="form"
                        :rules="rules"
                        ref="form"
                        label-width="120px"
                        label-position="right"
                        class="demo-ruleForm"
                >
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-input v-model="form.type" class="w200"></el-input>
                    </el-form-item>
                    <el-form-item label="配置" class="line20">
                        <span slot="label">
                            <span>配置</span> <br>
                            <span class="font-gray2 f12">(metric)</span>
                        </span>
                        <el-input v-model="form.metric"></el-input>
                    </el-form-item>
                    <el-form-item label="oid" class="line20">
                        <span slot="label">
                            <span>oid</span> <br>
                            <span class="font-gray2 f12">(oid)</span>
                        </span>
                        <el-input v-model="form.oid"></el-input>
                    </el-form-item>
                    <el-form-item label="正则表达" class="line20">
                        <span slot="label">
                            <span>正则表达</span> <br>
                            <span class="font-gray2 f12">(regex_extracts)</span>
                        </span>
                        <el-input type="textarea" :rows="2" v-model="form.regex_extracts"></el-input>
                    </el-form-item>
                    <el-form-item label="索引" class="line20">
                        <span slot="label">
                            <span>索引</span> <br>
                            <span class="font-gray2 f12">(indexes)</span>
                        </span>
                        <el-input v-model="form.indexes" ></el-input>
                    </el-form-item>
                    <el-form-item label="帮助" class="line20">
                        <span slot="label">
                            <span>帮助</span> <br>
                            <span class="font-gray2 f12">(help)</span>
                        </span>
                        <el-input v-model="form.help" ></el-input>
                    </el-form-item>
                    <el-form-item label="枚举值" class="line20">
                        <span slot="label">
                            <span>枚举值</span> <br>
                            <span class="font-gray2 f12">(enum_values)</span>
                        </span>
                        <el-input v-model="form.enum_values" ></el-input>
                    </el-form-item>
                    <el-form-item label="查询" class="line20">
                        <span slot="label">
                            <span>查询</span> <br>
                            <span class="font-gray2 f12">(lookups)</span>
                        </span>
                        <el-input v-model="form.lookups" class="w200"></el-input>
                    </el-form-item>
                    <el-form-item label prop="inlock">
                        <el-button type="primary" @click="save">保 存</el-button>
                        <el-button @click="editData.status = false">取 消</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="tc"></div>
        </el-dialog>
        <!-- 编辑结束 -->
        <!-- 详情开始 -->
        <!--<v-baseinfo v-model="drawer.show" >-->
            <!--<div class="wrapper-content" v-if="drawer.data" slot="user/list">-->
                <!--<div class="content-item">-->
                    <!--<span class="label wid120">名称：</span>-->
                    <!--<span class="value">{{drawer.data.name || '-'}}</span>-->
                <!--</div>-->
                <!--<div class="content-item">-->
                    <!--<span class="label wid120">类型：</span>-->
                    <!--<span class="value">{{drawer.data.type || '-'}}</span>-->
                <!--</div>-->
                <!--<div class="content-item">-->
                    <!--<span class="label wid120">-->
                        <!--配置<br>-->
                        <!--(metric)：-->
                    <!--</span>-->
                    <!--<span class="value">{{drawer.data.metric || '-'}}</span>-->
                <!--</div>-->
                <!--<div class="content-item">-->
                    <!--<span class="label wid120">-->
                        <!--oid：-->
                    <!--</span>-->
                    <!--<span class="value">{{drawer.data.oid || '-'}}</span>-->
                <!--</div>-->
                <!--<div class="content-item">-->
                    <!--<span class="label wid120">-->
                        <!--正则表达<br>-->
                        <!--(regex_extracts)：-->
                    <!--</span>-->
                    <!--<span class="value">{{drawer.data.regex_extracts || '-'}}</span>-->
                <!--</div>-->
                <!--<div class="content-item">-->
                    <!--<span class="label wid120">-->
                        <!--索引<br>-->
                        <!--(indexes)：-->
                    <!--</span>-->
                    <!--<span class="value">{{drawer.data.indexes || '-'}}</span>-->
                <!--</div>-->
                <!--<div class="content-item">-->
                    <!--<span class="label wid120">-->
                        <!--帮助<br>-->
                        <!--(help)：-->
                    <!--</span>-->
                    <!--<span class="value">{{drawer.data.help || '-'}}</span>-->
                <!--</div>-->
                <!--<div class="content-item">-->
                    <!--<span class="label wid120">-->
                        <!--枚举值<br>-->
                        <!--(enum_values)：-->
                    <!--</span>-->
                    <!--<span class="value">{{drawer.data.scrape_timeout || '-'}}</span>-->
                <!--</div>-->
                <!--<div class="content-item">-->
                    <!--<span class="label wid120">-->
                        <!--查询<br>-->
                        <!--(lookups)：-->
                    <!--</span>-->
                    <!--<span class="value">{{drawer.data.lookups || '-'}}</span>-->
                <!--</div>-->
            <!--</div>-->
        <!--</v-baseinfo>-->
        <!-- 详情结束 -->
    </div>
</template>
<script>
  import { cacheUserinfo } from "@cache";
  export default {
    data() {
      return {
        form: {
          id: 0,
          metric:'',
          lookups:'',
          help: "",
          indexes: "",
          regex_extracts:'',
          name: "",
          oid: "",
          type: "",
          enum_values:'',
        },
        editData: {
          status: false,
          title: "",
          id: 0
        },
        rules: {
          name: [
            {required: true, message: '输入名称', trigger: 'blur' }
          ],
        },
        drawer: {
          show: false,
          data: {},
          name: "Mrtric任务"
        },
        purMenu: [],
        params: {},
        userinfo:{},
        loading: false
      };
    },
    watch: {
      "drawer.show": {
        handler (newV) {
          if (!newV) {
            this.drawer.data = null;
            this.purMenu = [];
          }
        }
      }
    },
    methods: {
      edit(item) {
        if(JSON.stringify(item) === '{}'){
          this.editData.title = '添加Metric'
        }else{
          this.editData.title = '修改Metric'
        }

        // console.log(this.form)
        this.editData.status = true;
        this.editData.id = item.uid || 0;
        this.form.id = item.id || 0;
        this.form.indexes = item.indexes || "";
        this.form.lookups = item.lookups || "";
        this.form.metric = item.metric || "";
        this.form.name = item.name || "";
        this.form.oid = item.oid || "";
        this.form.regex_extracts = item.regex_extracts || "";
        this.form.type = item.type || "";
        this.form.help = item.help || "";
        this.form.enum_values = item.enum_values || "";
      },
      save() {
        this.form.id = Number(this.form.id);
        let that = this;
        that.$refs["form"].validate(valid => {
          if (valid) {
            let url = "snmp_exporter.metric_save";
            that.$api.jpost(url, that.form).then(res => {
              if (res.status === 1) {
                this.$success(res.msg);
                that.$refs.list.fetchData();
                that.editData.status = false;
              } else {
                that.$error(res.msg);
              }
            }).catch(() => {});
          }
        });
      },
      del(item) {
        let that = this;
        let arr = []
        arr.push(item.id)
        that
            .$confirm("此操作会将该snmp配置彻底删除，不可恢复, 是否继续?", "删除提醒")
            .then(() => {
              that.$api
                  .jpost("snmp_exporter.metric_remove", arr)
                  .then(res => {
                    if (res.status === 1) {
                      that.$success(res.msg);
                      that.$refs.list.fetchData();
                    } else {
                      that.$error(res.msg);
                    }
                  });
            })
            .catch(() => {});
      },
      setBaseInfo (item) {
        this.drawer.data = item;
        // this.drawer.name = item.job_name
        this.drawer.show = true;
      },
      // 生成配置
      generate(){
        let that= this
        this.$api.get("snmp_exporter.refresh").then(res => {
          if (res.status === 1) {
            that.$success(res.msg);
            that.$refs.list.fetchData();
          } else {
            that.$error(res.msg);
          }
        }).catch(() => {});
      }
    },
    mounted() {
      this.userinfo = cacheUserinfo.load()
      // this.getPurview();
      // this.getTest();

    }
  };
</script>

<style lang="scss" scoped>
    .tabs {
        width: 290px;
    }
    .line20 /deep/ .el-form-item__label {
        line-height: 20px !important;
    }

    .wid120 {

        width: 120px !important;
    }
</style>
